<script lang="ts" setup>
import {ref, onBeforeMount, PropType} from 'vue'
import dDialog from '@/components/dDialog/dDialog.vue'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import {HeaderData} from '@/components/dTable/dTable'
import {getPackageList, RegisterItemGroups, PackageList, GetPackageList} from '@/api/publicHealthExamination/physicalExaminationRegister'
import {ElMessage} from 'element-plus'

//是否显示
const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  // 套餐id
  packageId: {
    type: String as PropType<string | null>,
    required: true
  },
  // 年龄
  age: {
    type: [String, Number],
    required: true
  },
  // 性别
  gender: {
    type: String,
    required: true
  },
  // 既往史
  pastHistory: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['close', 'confirm'])

//默认选中
const defualtSeleted = ref<PackageList | undefined>(undefined)

// 选中的套餐id
const packageId = ref(props.packageId)

// 套餐列表
const packageTable = ref<Array<PackageList>>([])
// 选中的套餐
const checkupPackage = ref<PackageList>()

const packageTableHeaderData = ref<Array<HeaderData>>([
  {
    prop: 'packageName',
    label: '套餐名称',
    columnType: 'text',
    align: 'left',
    'min-width': '100'
  }
  // {
  //   prop: 'packagePrice',
  //   label: '套餐价格',
  //   columnType: 'text',
  //   align: 'left',
  //   'min-width': '150'
  // }
])

const showPackageLoading = ref<boolean>(false)

// 可选项目组合
const packageItemsData = ref<Array<RegisterItemGroups>>([])
const packageItemsTableHeaderData = ref<Array<HeaderData>>([
  {
    prop: 'itemGroupName',
    label: '项目组合名称',
    columnType: 'text',
    align: 'left',
    'min-width': '150'
  }
  // {
  //   prop: 'price',
  //   label: '单价',
  //   columnType: 'text',
  //   align: 'left',
  //   'min-width': '100'
  // }
])

const showPackageItemsLoading = ref<boolean>(false)

const onPackageRowClick = (row: PackageList) => {
  if (row === null) return
  packageItemsData.value = row.itemGroupVOS
  packageId.value = row.id
  checkupPackage.value = row
}

//关闭
const onClose = () => {
  emits('close')
}

// 确认按钮
const onConfirm = () => {
  if (packageId.value) {
    emits('confirm', checkupPackage.value)
    onClose()
  } else {
    ElMessage.error('请点击套餐行选择套餐！')
  }
}

// 显示加载状态
const showSaveLoading = ref(false)

const getPackage = () => {
  showPackageItemsLoading.value = true
  const params: GetPackageList = {
    age: props.age,
    gender: props.gender
  }
  props.pastHistory ? (params.pastHistory = props.pastHistory) : delete params.pastHistory
  getPackageList(params)
    .then((res) => {
      packageTable.value = res.data.data
      packageTable.value.forEach((item) => {
        if (item.id === packageId.value) {
          defualtSeleted.value = item
        }
      })
    })
    .catch((err) => {
      console.warn(err)
    })
    .finally(() => {
      showPackageItemsLoading.value = false
    })
}

onBeforeMount(() => {
  getPackage()
})
</script>

<template>
  <d-dialog
    title="修改套餐"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    :width="1000"
    @cancel="onClose"
    @confirm="onConfirm"
    @close="onClose"
  >
    <div class="package-row d-common-flex-row d-common-width-full">
      <d-table-promote
        :show-header="false"
        :show-footer="false"
        :stripe="true"
        :table-data="packageTable"
        :table-header-data="packageTableHeaderData"
        :default-seleted="defualtSeleted"
        :show-loading="showPackageLoading"
        @row-click="onPackageRowClick"
      />
      <div class="package-space" />
      <d-table-promote
        :show-header="false"
        :show-footer="false"
        :stripe="true"
        :table-data="packageItemsData"
        :table-header-data="packageItemsTableHeaderData"
        :highlight-current-row="false"
        :show-loading="showPackageItemsLoading"
      />
    </div>
  </d-dialog>
</template>
<style scoped lang="less">
.package-row {
  height: 600px;
  column-gap: var(--d-margin-level-3);
}
.package-space {
  background: var(--d-color-grey-1);
  height: 100%;
  width: 6px;
}
</style>
